<template>
  <div class="projectArchive-container page-common-layout">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            @conditionChange="selectGroupChange($event)"
          >
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="archive-body-container">
      <!-- 左侧布局 -->
      <div class="tree-baseinfo-container">
        <div class="header-container">
          <div class="name">竣工资料</div>
          <div class="import-btns">
            <a-button
              class="cu-btn-filter"
              @click="handelImportModal()"
              v-if="btn.import"
            >
              导入
            </a-button>
            <a-button
              class="cu-btn-filter"
              v-if="btn.export"
              @click="exportExcel()"
            >
              导出
            </a-button>
          </div>
        </div>
        <div class="tree-body-container">
          <div class="tree-search">
            <a-input-search
              style="width: 100%"
              placeholder="请输入关键字"
              @search="onSearch"
              v-model="keyWord"
            />
          </div>
          <div class="tree-tip">
            <div>编号/类目</div>
            <div>卷数/页次</div>
          </div>
          <div class="tree-main">
            <a-spin :spinning="spinning">
              <a-empty v-if="treeData.length == 0" :description="false" />
              <a-tree
                v-else
                show-icon
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                @expand="onExpand"
                @select="onSelect"
                :replaceFields="{
                  children: 'children',
                  title: 'nodeName',
                  key: 'uuid',
                }"
              >
                <!-- 自定义图标 -->
                <template slot="custom" slot-scope="{ children, selected }">
                  <icon-font
                    :class="[selected && 'checked']"
                    :type="
                      children && children.length
                        ? 'icon-wenjianjia-'
                        : 'icon-jidiantuzhi'
                    "
                  />
                </template>
                <template
                  slot="title"
                  slot-scope="{
                    nodeName,
                    selected,
                    volumesNumbers,
                    pageNumbers,
                  }"
                >
                  <span
                    :title="
                      nodeName + '(' + volumesNumbers + '/' + pageNumbers + ')'
                    "
                    :class="[selected && 'checked']"
                  >
                    {{ nodeName }}
                  </span>
                  <div class="operate-icon">
                    <span> {{ volumesNumbers }}/{{ pageNumbers }}</span>
                  </div>
                </template>
              </a-tree>
            </a-spin>
          </div>
        </div>
      </div>
      <!-- 拖拽 -->
      <div class="resizer">
        <div class="drag-container">
          <a-icon type="column-width" />
        </div>
      </div>
      <!-- 右侧布局 -->
      <div class="table-baseinfo-container">
        <div class="files-container">
          <div class="header-container">
            <div class="name">档案目录</div>
          </div>
          <div class="directory-body-container">
            <vxe-table
              ref="filexTable"
              height="auto"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="files.tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="files.loading"
              :row-config="{ isCurrent: true, isHover: true }"
              @current-change="currentChangeEvent"
            >
              <vxe-column type="seq" width="80" title="序号">
                <template #default="{ rowIndex }">
                  <span v-if="rowIndex != 0">
                    {{ rowIndex }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column field="caseTitle" title="案卷题名"> </vxe-column>
              <vxe-column field="documentCode" title="档号"> </vxe-column>
              <vxe-column field="volumesNumbers" title="件数"> </vxe-column>
              <vxe-column field="pageNumbers" title="页数"> </vxe-column>
              <vxe-column title="起止时间">
                <template #default="{ row,rowIndex }">
                  <span v-if="rowIndex != 0">
                    {{ row.startDate }}~{{ row.endDate }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column field="retentionPeriodDesc" title="保管期限">
              </vxe-column>
              <vxe-column field="remark" title="备注"> </vxe-column>
            </vxe-table>
          </div>
        </div>
        <div class="volume-container">
          <div class="header-container">
            <div class="name">卷内目录</div>
            <div class="import-btns">
              <a-button
                class="cu-btn-primary margin-bottom-xs"
                icon="plus"
                @click="handelAddVolume()"
                v-if="rowsItem.uuid"
              >
                新增
              </a-button>
            </div>
          </div>
          <div class="directory-body-container">
            <vxe-table
              ref="xTable"
              height="auto"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="volume.tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="volume.loading"
            >
              <vxe-column type="seq" width="80" title="序号"> </vxe-column>
              <vxe-column field="fileCode" title="文件编号"> </vxe-column>
              <vxe-column field="responsibility" title="责任者"> </vxe-column>
              <vxe-column field="fileTitle" title="文件材料题名"> </vxe-column>
              <vxe-column title="文件查看/下载">
                <template #default="{ row }">
                  <div class="operate-icon" v-if="row.fileInfo">
                    <a-tooltip>
                      <template slot="title">
                        预览
                      </template>
                      <a-icon type="eye" @click="viewFile(row)" />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        下载
                      </template>
                      <a-icon type="download" @click="downloadFile(row)" />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="describeinfo" title="描述"> </vxe-column>
              <vxe-column field="uploadTime" title="时间"> </vxe-column>
              <vxe-column field="pageRange" title="页次"> </vxe-column>
              <vxe-column field="remark" title="备注"> </vxe-column>
              <vxe-column field="pageNumber" title="页数"> </vxe-column>
              <vxe-column
                field="operate"
                width="120"
                title="操作"
                fixed="right"
                align="left"
              >
                <template #default="{ row }">
                  <div class="text-button-group">
                    <a-tooltip>
                      <template slot="title">
                        编辑
                      </template>
                      <a-icon type="edit" @click="handelEditVolume(row)" />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        意见反馈
                      </template>
                      <icon-font
                        type="icon-yijianfankui"
                        @click="handelFeed(row)"
                      />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        删除
                      </template>
                      <a-icon type="delete" @click="handleDelVolume(row)" />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div class="pager-container">
            <vxe-pager
              size="small"
              background
              :current-page.sync="volume.pager.page"
              :page-size.sync="volume.pager.pageSize"
              :total="volume.pager.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
              :page-sizes="[20, 50, 100, 500]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  共<span>{{ volume.pager.total }}</span
                  >条
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <!-- 卷内目录 -->
    <addVolumeModal
      :visible.sync="volume.visible"
      :parameter="volume.soucre"
      :operateType="volume.operateType"
      @ok="addVolumeModalOk()"
    ></addVolumeModal>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
    <!-- 意见反馈 -->
    <feedBackModal
      :key="feedBackModal.key"
      :visible.sync="feedBackModal.visible"
      :parameter="feedBackModal.soucre"
    ></feedBackModal>
    <!-- 导入 -->
    <importModal
      :visible.sync="importModal.visible"
      :parameter="importModal.soucre"
      @import="importModalOk()"
    ></importModal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/TopVUI";
import { downloadDfs } from "@/utils/TopVUI";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import cloneDeep from "lodash.clonedeep";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
import { addAttributeByKey, flatTreeData } from "@/utils/util.js";
import { downLoadBatchFileByArraybuffer } from "@/utils/TopVUI";
//卷内目录
import addVolumeModal from "@/pages/customPage/projectArchiveConfig/components/addVolumeModal.vue";
//预览
import previewModal from "@/pages/document/minio/previewModal";
//意见反馈
import feedBackModal from "./components/feedBackModal.vue";
//导入
import importModal from "@/pages/customPage/projectArchiveConfig/components/importModal.vue";
import {
  getButtonAuth,
  getConfigTree,
  pageFilesDirectory,
  pageVolume,
  deleteVolume,
  exportConfigTreeZip,
} from "@/api/safetyManage";

export default {
  components: {
    IconFont,
    previewModal,
    ScreenConditions,
    AssociativeSelectGroup,
    addVolumeModal,
    feedBackModal,
    importModal,
  },
  data() {
    return {
      selectMap: [
        //项目
        {
          type: "proCode",
          mode: "default",
          placeholder: "请选择项目",
          isDefault: true,
        },
      ],
      conditionsData: {},
      //树
      spinning: false,
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      treeItem: {},
      keyWord: "",
      cloneTreeData: [],
      //档案目录
      files: {
        //列表
        loading: false,
        tableData: [],
        refresh: true,
      },
      rowsItem: {},
      //卷内目录
      volume: {
        //列表
        loading: false,
        tableData: [],
        pager: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        //弹窗
        visible: false,
        soucre: {},
        operateType: "",
      },
      //权限
      btn: {},
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
      //意见反馈
      feedBackModal: {
        key: "feed",
        visible: false,
        soucre: {},
      },
      //导入
      importModal: {
        visible: false,
        soucre: {},
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  mounted() {
    this.dragResize();
  },

  methods: {
    //导入弹窗
    handelImportModal() {
      let { proCode } = this.conditionsData;
      this.importModal.soucre = { proCode };
      this.importModal.visible = true;
    },
    importModalOk() {
      this.getTreeData();
    },
    //导出
    exportExcel() {
      let { proCode } = this.conditionsData;
      exportConfigTreeZip({ proCode })
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, "竣工资料");
        })
        .catch((_) => {})
        .finally((_) => {});
    },
    //预览
    viewFile(row) {
      let { url } = row.fileInfo;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    //下载
    downloadFile(row) {
      let { url } = row.fileInfo;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getData();
    },

    getData() {
      Promise.all([this.getAuthData(), this.getTreeData()]);
    },
    //查询导入导出权限
    getAuthData() {
      return new Promise((resolve, reject) => {
        let { proCode } = this.conditionsData;
        getButtonAuth({ proCode })
          .then((res) => {
            this.btn = res?.data ?? {};
            resolve();
          })
          .catch((_) => {
            this.btn = {};
            reject();
          });
      });
    },
    getTreeData() {
      this.spinning = true;
      return new Promise((resolve, reject) => {
        let { proCode } = this.conditionsData;
        getConfigTree({ proCode })
          .then((res) => {
            let { data } = res;
            this.cloneTreeData = cloneDeep(data ?? []);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              this.cloneTreeData,
              "children"
            );
            this.treeData = filterData;
            this.treeData.length > 0 && this.getFirstTreeNode();
            if (this.treeData.length == 0) {
              this.files.tableData = [];
              this.rowsItem = {};
              this.volume.tableData = [];
            }
            resolve();
          })
          .catch((_) => {
            this.cloneTreeData = [];
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //默认展开第一级节点
    getFirstTreeNode() {
      let { treeData } = this;
      let flatData = flatTreeData(treeData, "children");
      let item = flatData.find((v) => !v.children || v.children.length == 0);
      this.expandedKeys = [item.uuid];
      this.selectedKeys = [item.uuid];
      this.treeItem = item;
      this.getFilesTableData();
    },

    //树展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //树选择
    onSelect(selectedKeys, info) {
      let { uuid } = info.node.dataRef;
      if (this.selectedKeys.includes(uuid)) {
        return;
      }
      this.selectedKeys = [uuid];
      this.treeItem = info.node.dataRef;
      this.files.refresh = true;
      this.getFilesTableData();
    },

    //行选中
    currentChangeEvent({ row, rowIndex }) {
      this.files.refresh = false;
      if (rowIndex == 0) {
        return;
      }
      this.rowsItem = row;
      this.getVolumeTableData();
    },

    //查询档案目录列表
    getFilesTableData() {
      let { id } = this.treeItem;
      if (!id) {
        return;
      }
      this.files.loading = true;
      return new Promise((resolve, reject) => {
        pageFilesDirectory({ classifyId: id })
          .then((res) => {
            let { nodeName, documentCode } = this.treeItem;
            let { data } = res;
            this.files.tableData = data ?? [];
            this.files.tableData.unshift({ caseTitle: nodeName, documentCode });
            if (this.files.refresh) {
              this.rowsItem = data?.[1] ?? {};
              this.$refs.filexTable.setCurrentRow(this.files.tableData[1]);
              this.getVolumeTableData();
            }
            resolve();
          })
          .catch((_) => {
            this.rowsItem = {};
            this.files.tableData = [];
            reject();
          })
          .finally((_) => {
            this.files.loading = false;
          });
      });
    },

    //卷内目录确定
    addVolumeModalOk() {
      this.getVolumeTableData();
    },
    //新增卷内目录
    handelAddVolume() {
      let { uuid } = this.rowsItem;
      this.volume.soucre = { directoryUuid: uuid };
      this.volume.operateType = "1";
      this.volume.visible = true;
    },
    //编辑卷内目录
    handelEditVolume(row) {
      this.volume.soucre = { uuid: row.uuid };
      this.volume.operateType = "2";
      this.volume.visible = true;
    },

    //意见反馈
    handelFeed(row) {
      this.feedBackModal.key = Date.now();
      this.feedBackModal.soucre = {
        fileUuid: row.uuid,
        proCode: row.proCode,
      };
      this.feedBackModal.visible = true;
    },

    //删除卷内目录
    handleDelVolume(row) {
      let dataLength = this.volume.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteVolume({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                if (dataLength == 1 && that.volume.pager.page > 1) {
                  that.volume.pager.page -= 1;
                }
                that.getVolumeTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //查询卷内目录列表
    getVolumeTableData() {
      let { page, pageSize } = this.volume.pager;
      let { uuid } = this.rowsItem;
      if (!uuid) {
        this.volume.pager.page = 1;
        this.volume.tableData = [];
        return;
      }
      this.volume.loading = true;
      pageVolume({
        page,
        pageSize,
        directoryUuid: uuid,
      })
        .then((res) => {
          this.volume.tableData = res?.data?.rows || [];
          this.volume.pager.total = res?.data?.totalCount || 0;
        })
        .catch((_) => {
          this.volume.tableData = [];
          this.volume.pager.total = 0;
        })
        .finally((_) => {
          this.volume.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.volume.pager.page = currentPage;
      this.volume.pager.pageSize = pageSize;
      this.getVolumeTableData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    onSearch() {
      let { keyWord, cloneTreeData } = this;
      let cloneData = cloneDeep(cloneTreeData);
      this.treeData = this.filterTree(cloneData, "children", (node) =>
        node.nodeName.includes(keyWord)
      );
    },

    //过滤树形数据
    filterTree(data, children = "children", filterFunc) {
      return data
        .filter((node) => {
          // 如果当前节点符合条件，直接返回true
          if (filterFunc(node)) {
            return true;
          }
          // 如果当前节点有子节点，递归过滤子节点
          if (node[children]) {
            node[children] = this.filterTree(
              node[children],
              children,
              filterFunc
            );
            // 如果过滤后的子节点不为空，说明当前节点需要保留
            return node[children].length > 0;
          }
          // 当前节点不符合条件，也没有子节点或子节点不符合条件，返回false
          return false;
        })
        .map((node) => {
          // 创建新对象，避免修改原始数据
          return {
            ...node,
            [children]: node[children]
              ? this.filterTree(node[children], children, filterFunc)
              : [],
          };
        });
    },

    //拖拽
    dragResize() {
      const container = document.querySelector(".drag-container");
      const left = document.querySelector(".tree-baseinfo-container");
      const right = document.querySelector(".table-baseinfo-container");
      let isDragging = false;
      let startX;
      let startWidth;
      container.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startWidth = parseFloat(getComputedStyle(left).width);
      });
      document.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        const moveX = e.clientX - startX;
        const newWidth = startWidth + moveX;
        left.style.width = `${newWidth}px`;
        right.style.width = `calc(100% - ${newWidth}px -10px)`;
      });
      document.addEventListener("mouseup", () => {
        isDragging = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.projectArchive-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .archive-body-container {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    overflow: hidden;
    .header-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid #d9d9d9;
      .name {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
      .import-btns {
        /deep/.ant-btn {
          margin-bottom: 0 !important;
          &:last-of-type {
            margin-right: 0 !important;
          }
        }
      }
    }
    .tree-baseinfo-container {
      background-color: @base-bg-color;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 300px;
      min-width: 300px;
      .tree-body-container {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .tree-tip {
          padding: 10px 10px 10px 48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #8c8c8c;
        }
        .tree-main {
          flex: 1;
          overflow: auto;
          overflow-x: hidden;
          position: relative;
          /deep/.ant-tree {
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                position: relative;
                width: calc(100% - 34px);
                padding: 0 5px 0 0;
                .ant-tree-iconEle {
                  color: #f3ab1f;
                  font-size: 16px;
                  .checked {
                    color: #1677ff;
                  }
                }
                .ant-tree-title {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  display: inline-block;
                  max-width: calc(100% - 60px);
                  .checked {
                    color: #1677ff;
                  }
                  .operate-icon {
                    position: absolute;
                    top: 55%;
                    right: 0;
                    transform: translateY(-50%);
                  }
                }
              }
            }
          }
          /deep/.ant-empty {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          /deep/.ant-spin {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-height: 100%;
          }
        }
      }
    }
    .resizer {
      width: 10px;
      position: relative;
      .drag-container {
        cursor: col-resize;
        user-select: none;
        touch-action: none;
        width: 16px;
        height: 26px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 2px 2px 2px 2px;
        position: absolute;
        top: 45%;
        left: -4px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .table-baseinfo-container {
      flex: 1;
      min-width: 600px;
      display: flex;
      flex-direction: column;
      .directory-body-container {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
      }
      .files-container {
        flex: 1;
        background-color: @base-bg-color;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        .header-container {
          padding-right: 10px;
          height: 57px;
        }
        .directory-body-container {
          /deep/.vxe-table {
            .vxe-table--body {
              tbody {
                tr:nth-child(1) {
                  color: #333333 !important;
                  font-family: Microsoft YaHei, Microsoft YaHei;
                  font-weight: bold;
                  font-size: 14px;
                  background: #f2f2f2;
                }
              }
            }
          }
        }
      }
      .volume-container {
        border-radius: 6px;
        flex: 1;
        background-color: @base-bg-color;
        display: flex;
        flex-direction: column;
        .header-container {
          padding-right: 10px;
          height: 57px;
        }
        .directory-body-container {
          padding-bottom: 0;
          .operate-icon {
            .anticon {
              cursor: pointer;
              font-size: 18px;
              color: #1677ff;
            }
            .anticon-eye {
              margin-right: 20px;
            }
            .anticon-download {
              color: #239b53;
            }
          }
        }
        .pager-container {
          flex-shrink: 0;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
